<template>
	<view class="login">
		<view class="img">
			<image src="../../static/img/userface/20.jpg"></image>
			<text>欢迎登录</text>
		</view>
		<view class="log">
			<view class="user">
				<u--input v-model="user.account" placeholder="用户名" prefixIcon="account" prefixIconStyle="font-size: 30px;color: #909399" border="bottom"></u--input>
				<u--input v-model="user.pwd" :password="true" placeholder="密码" prefixIcon="lock" prefixIconStyle="font-size: 30px;color: #909399" border="bottom"></u--input>
			</view>
			<view class="btn">
				<u-button @click="Login()" type="error" shape="circle">登录</u-button>
			</view>
			<view class="zc">
				还没注册？<text @click="goEnroll()">立即注册</text>
			</view>
		</view>
	</view>
</template>

<script>
import { mapActions,mapState } from 'vuex';
	export default {
		data() {
			return {
				user : {
					account : '',
					pwd : ''
				},
			}
		},
		computed:{
			...mapState('login',['users','log'])
		},
		methods: {
			...mapActions('login',['actionEnrollList','actionLogin']),
			Login(){
				console.log(this.users);
				this.users.forEach((item)=>{
					console.log(item);
					if(this.user.account!='' && this.user.pwd!=''){
						if(this.user.account == item.account && this.user.pwd == item.pwd){
							uni.switchTab({
								url:'/pages/mine/mine'
							})
							let k ={
									account : item.account,
									phone : item.phone,
									pwd : item.pwd,
								}
							this.actionLogin(k);
							console.log(k);
						}else if(this.user.account != item.account && this.user.pwd == item.pwd){
							uni.showToast({
								icon:'none',
								title:'账号错误'
							})
						}else if(this.user.account == item.account && this.user.pwd != item.pwd){
							uni.showToast({
								icon:'none',
								title:'密码错误'
							})
						}else if(this.user.account != item.account && this.user.pwd != item.pwd){
							uni.showToast({
								icon:'none',
								title:'账号不存在'
							})
						}
					}
				})
			},
			goEnroll(){
				uni.navigateTo({
					url:'/pages/enroll/enroll'
				})
			}
		}
	}
</script>

<style>
.login{
	width: 100%;
}
.img{
	width: 140px;
	height: 140px;
	padding: 10px;
	margin: 0 auto;
	text-align: center;
}
.img image{
	width: 100%;
	height: 100%;
}
.img text{
	font-size: 14px;
}
.log{
	width: 90%;
	margin: 20px auto;
}
.log .user{
	width: 100%;
	padding-bottom: 20px;
}
.log .u-input{
	height: 40px;
}
.log .zc{
	margin-top: 20px;
	font-size: 14px;
	text-align: center;
}
.log .zc text{
	font-size: 16px;
	color: #f56c6c;
}
</style>
